<template>
	<view class="container">
		<swiper :indicator-dots="true" :autoplay="true" indicator-color="#ccc" indicator-active-color="#007aff"
			:interval="3000" :duration="1000">
			<swiper-item v-for="item in banner">
				<view class="swiper-item">
					<image :src="baseUrl+item.advImg" style="width: 100%;" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-search-bar @confirm="search" @cancel="getList()" placeholder="请输入房源名称" bgColor="white"
			style="margin-top: 10px;" />
		<uni-card title="房源分类" style="margin-top: 10px;">
			<view class="" style="display: flex;flex-wrap: wrap;">
				<view v-for="(item,index) in service" style="margin-bottom: 10px;text-align: center;width: 25%;"
					@click="getList(null,item.name)" :key="index">
					<image :src="item.imgUrl" style="height: 50px;width: 50px;" mode=""></image>
					<view class="" style="color: #737373;font-size: 13px;margin-top: 5px;">{{item.name}}</view>
				</view>
			</view>
		</uni-card>
		<uni-card title="房源列表" style="margin-top: 10px;">
			<view v-for="(item,index) in list" :key="index" @click="to(item.id)">
				<image :src="baseUrl+item.pic" style="width: 100%;height: 150px;" mode=""></image>
				<view class="item" style="color: #252525;font-size: 15px;">{{item.sourceName}}</view>
				<view class="item">房源面积：
					<text style="color: red;font-size: 16px;">{{item.areaSize}}平方米</text>
				</view>
				<view class="item">房源价格：<text style="color: red;font-size: 16px;">{{item.price}}</text></view>
				<view class="item" style="color: #737373;
				display: -webkit-box;
				    -webkit-box-orient: vertical;
				    overflow: hidden;
				    -webkit-line-clamp: 2;
				">
					<view class="" v-html="item.description"></view>
				</view>
				<view class="line"></view>
				
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				service: [{
						name: "二手",
						imgUrl: "/static/t1.png"
					},
					{
						name: "租房",
						imgUrl: "/static/t2.png"
					},
					{
						name: "楼盘",
						imgUrl: "/static/t3.png"
					},
					{
						name: "中介",
						imgUrl: "/static/t4.png"
					}
				],
				banner: [],
				list: [],
			};
		},
		onLoad(item) {

		},
		onReady() {
			this.get('/prod-api/api/rotation/list', {
				type: '2'
			}, ).then(res => {
				let data = res.rows
				this.banner = data
			})
			this.getList()
		},
		onShow() {

		},
		methods: {
			to(id) {
				uni.navigateTo({
					url: 'detail/detail?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getList(name, type) {
				this.get('/prod-api/api/house/housing/list', {
					houseType: type,
					sourceName: name,
				}, 1).then(res => {
				  
					let data = res.rows
					this.list = data
				})
			},
			
			// 后端自动做了模糊查找的功能
			search(e) {
				this.getList(e.value)
			}
		}
	};
</script>

<style lang="scss">

</style>
